<template>
  <view class="coupon">
    <view class="left">
      <image class="shop-logo" :src="coupon!.shopDisplayInfo.logo" mode="scaleToFill" />
    </view>
    <view class="right">
      <view class="right-row1" :style="{ opacity: available ? 'none' : 0.5 }">
        <view class="coupon-shop-info">
          <span class="shop-name">{{ coupon!.shopDisplayInfo.name }}</span>
          <span class="expiration-time" v-if="coupon!.expirationTime"
            >有效至{{ formatDateTime(coupon!.expirationTime, 'yyyy.MM.dd HH:mm') }}</span
          >
        </view>
        <view class="coupon-amount-info">
          <view class="coupon-amount">
            <span class="amount-char" v-if="coupon!.type == CouponType.CASH_COUPON">￥</span>{{ coupon!.parValue
            }}<span v-if="coupon!.type == CouponType.DISCOUNT_COUPON" class="discount-char">折商品券</span>
          </view>
          <view class="coupon-forecast" v-if="coupon!.type == CouponType.DISCOUNT_COUPON && discountableAmount"
            >选择立减{{ discountableAmount }}</view
          >
          <view class="coupon-threshold" v-if="coupon!.thresholdAmount">满{{ coupon!.thresholdAmount }}可用</view>
        </view>
        <view class="select-circle" v-if="selectMode && !hideSelectButton">
          <select-circle :checked="checked" @click="emit('select')" />
        </view>
      </view>
      <view class="right-row2">
        <view class="use">
          <span class="useRule" @click="expandCollapseButtonRef?.toggle()"
            ><span>使用规则</span>
            <expand-collapse-button :defaultFold="defaultFold" ref="expandCollapseButtonRef" class="icon" />
          </span>
          <view class="toUse" v-if="!selectMode">去使用</view>
          <view class="toReceive" v-if="coupon!.id == null" @click="emit('select', true)">领取使用</view>
        </view>
        <view
          class="describe"
          v-show="expandCollapseButtonRef != null && !expandCollapseButtonRef?.isFold"
          :style="{ color: describeTextColor }"
        >
          <p v-for="(item, index) in coupon!.describe?.split('-').filter((item) => item != '')" :key="index">
            - {{ item }}
          </p>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { CouponType } from '@/enum/CouponType'
import { formatDateTime } from '@/utils/TimeUtils'
import ExpandCollapseButton from '@/components/expand-collapse-button/index.vue'
import { CouponCoreInfo } from '@/types/response/coupon'
import { ref } from 'vue'
import SelectCircle from '@/components/select-circle/index.vue'
const expandCollapseButtonRef = ref()
const emit = defineEmits<{
  (e: 'select', isisNeedToClaimFirst?: boolean): void
}>()
const props = defineProps({
  coupon: {
    type: Object as () => CouponCoreInfo,
    require: true
  },
  defaultFold: {
    type: Boolean,
    default: true
  },
  describeTextColor: {
    type: String,
    default: '#7c7c7c'
  },
  selectMode: {
    type: Boolean,
    default: false
  },
  checked: {
    type: Boolean,
    default: false
  },
  available: {
    type: Boolean,
    default: true
  },
  hideSelectButton: {
    type: Boolean,
    default: false
  },
  discountableAmount: {
    type: Number,
    default: undefined
  }
})
</script>

<style scoped lang="scss">
.coupon {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 30rpx;
  width: 100%;
  border-radius: 20rpx;
  background-color: #fff;
  box-sizing: border-box;

  .left {
    overflow: hidden;
    margin-right: 20rpx;
    width: 170rpx;
    height: 170rpx;
    flex-shrink: 0;

    .shop-logo {
      width: 100%;
      height: 100%;
      border-radius: 17rpx;
    }
  }

  .right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .right-row1 {
      display: flex;
      justify-content: space-between;
      padding-bottom: 15rpx;
      border-bottom: 1px dotted #00000035;
      flex-grow: 1;

      .coupon-shop-info {
        display: flex;
        width: 0;
        flex-grow: 1;
        flex-direction: column;

        .shop-name {
          overflow: hidden;
          font-size: 35rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 60rpx;
        }

        .expiration-time {
          font-size: 27rpx;
          color: #595959;
        }
      }

      .coupon-amount-info {
        display: flex;
        align-items: center;
        flex-direction: column;
        color: #f84925;

        .coupon-amount {
          $amount-font-size: 50rpx;

          font-size: $amount-font-size;
          font-weight: bold;

          .amount-char,
          .discount-char {
            font-size: $amount-font-size * 0.6;
          }
        }

        .coupon-threshold,
        .coupon-forecast {
          font-size: 27rpx;
        }
      }

      .select-circle {
        display: flex;
        align-items: center;
      }
    }

    .right-row2 {
      padding-top: 12rpx;

      .use {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .useRule {
          font-size: 27rpx;
          color: #595959;
        }

        .toUse,
        .toReceive {
          padding: 0 20rpx;
          font-size: 23rpx;
          border-radius: 15rpx;
          color: #fff;
          background: linear-gradient(to right, #f96f13, #f74660);
          line-height: 50rpx;
        }
      }

      .describe {
        margin-top: 20rpx;
        font-size: 25rpx;
      }
    }
  }
}
</style>
